<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>main</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .bg_p{
                margin-top: 0px;
        }
        .person{
                transform: scale(0.5);
                float: left;
        }
        .role_1{
                margin-top: 20px;
                float: left;
        }
        .conversation{
          position: absolute;
          left:160px;
          top: 205px;
          width: 500px;
          height: 120px;
          background:rgba(51,255,255,.5);
          border-radius: 5px;
          /* 圆角 */
          text-indent: 6px;
          line-height: 35px;
      }
      .bg_p img{
        position:absolute;
        left:0px;
        top:0px;
        z-index:-1;
        width:100%!important;
        height:100%!important;
      }
      .role_1 img{
        float: left;
        margin-left: -55px;
        margin-top: -37px;
        width:100%!important;
        height:150%!important;
      }
      .return{
        position:absolute;
        left:0px;
        top:0px;
      }
    </style>
</head>
<body>
        <div class="bg_p">
        <!-- 背景 -->
          <img src="../image/p_station.jpg" alt="">
        </div>
        <div class="role_1">
          <img class="person"src="../image/person/old.jpg" alt="">
          <form>
                  <label class="return">
                          <input type="button" name="button" id="back" value="返回" style="height:80px;width:100px;color:white;float:left;"/>
                  </label>
          </form>
        </div>
        <div class="conversation">
                        <div class="content">
                                <p id = "text" class="text">回家的路上，</p>
                                <div id="next" class="next"><a herf = "#" style = "margin-top:80px;margin-left:10px"><b></b></a></div>
                        </div>
        </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.setScreenOrientation({
            orientation: 'landscape_left'
        });
    };
    var mo=function(e){e.preventDefault();};
        function stop(){
                document.body.style.overflow='hidden';
                document.addEventListener("touchmove",mo,{passive:false});//禁止页面滑动
        }//直接默认不让滑动
        stop();


</script>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

<script>

$('#back').click(function () {
        window.open('start.html')
})//跳转到mian页面
</script>
<script>
// clickCount 统计点击的次数
var clickCount = 0;
//
var nextDialogId = '0';
// 对话类
var Dialog = /** @class */ (function () {
    function Dialog() {
    }
    return Dialog;
}());
var GalOption = /** @class */ (function () {
    function GalOption(content, nextId) {
        this.content = content;
        this.nextId = nextId;
    }
    return GalOption;
}());
// 创建一个 Map 用来储存下面的键值对
var data = new Map();
var NewDialog = function (id, content, nextId, type, branches) {
    var a = new Dialog();
    a.id = id;
    a.content = content;
    a.nextId = nextId;
    a.type = type;
    a.branches = branches;
    return a;
};
// 给 Dialog实例的属性赋值
(function () {
    data.set('0', NewDialog('0', '今天下课有些晚了，车站只有我一个人', '1', 'text', null));
    data.set('1', NewDialog('1', '有点害怕', '2', 'text', null));
    data.set('2', NewDialog('2', '一位奶奶走了过来，', '3', 'text', null));
    data.set('3', NewDialog('3', '“小朋友，你怎么这么晚了还一个人在外面呀？”', '4', 'text', null));
    data.set('4', NewDialog('4', '“是不是错过末班车了？”', '5', 'text', null));
    data.set('5', NewDialog('5', '“要不要奶奶带你回家呀”', '6', 'text', null));
    var branches1 = new Array();
    branches1.push(new GalOption("跟她去", '7'));
    branches1.push(new GalOption("不跟他去", '8'));
    data.set('6', NewDialog('6', null, null, 'option', branches1));
    data.set('7', NewDialog('7', '小朋友，你被坏人拐跑啦！我们重新选一次吧', '6', 'text', null));
    data.set('8', NewDialog('8', '爸爸妈妈说过，不能和陌生人走', '9', 'text', null));
    data.set('9', NewDialog('9', '我要自己等车!', '10', 'text', null));
    data.set('10', NewDialog('10', '这时，公交车来了', '11', 'text', null));
    data.set('11', NewDialog('11', '我飞快的跑进了车里', '12', 'text', null));
    data.set('12', NewDialog('12', '回到家里，爸爸妈妈听完这件事，都夸奖了我并且给我买了好吃的棒棒糖！', '13', 'text', null));
    data.set('13', NewDialog('13', '小朋友，恭喜你赢得了游戏！', '0', 'text', null));
})();
var btn1 = $("<button id=\"btn1\" class=\"btn btn-primary ml-2 mr-2 mt-2 branch\"></button>");
var btn2 = $("<button id=\"btn2\" class=\"btn btn-primary ml-2 mr-2 mt-2 branch\"></button>");
// 下一步按钮的 DOM 对象
var nextButton = $('#next');
// 对话框的 DOM 对象
var dialog = $("#text");
var conversation = $(".conversation");
//  修改文本框的内容
// 为 nextButton 的 click 事件添加一个监听器
var removeButton = function () {
    jQuery("#btn1").remove();
    jQuery("#btn2").remove();
};
var mut = function () {
    //将下一个 id 传递给 currentDialog
    var currentDialog = data.get(nextDialogId);
    console.log(nextDialogId);
    console.log(currentDialog);
    //如果 other 属性字符串为 yes ,插入button按钮
    switch (currentDialog.type) {
        case "text":
            dialog.text(currentDialog.content);
            nextDialogId = currentDialog.nextId;
            break;
        case "option":
            dialog.text("");
            btn1.text(currentDialog.branches[0].content);
            conversation.prepend(btn1);
            jQuery("#btn1").click(function () {
                nextDialogId = currentDialog.branches[0].nextId;
                mut();
                removeButton();
            });
            btn2.text(currentDialog.branches[1].content);
            conversation.prepend(btn2);
            jQuery("#btn2").click(function () {
                nextDialogId = currentDialog.branches[1].nextId;
                mut();
                removeButton();
            });
            break;
        default:
            console.log("incorrect dialog type");
    }
};
nextButton.click(mut);


</script>
</html>
